<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4610055_x5ppb3z40ie.css">
    <link href="framework/reset.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <script src="js/index.js"></script>
    <title>拼多多首页</title>
</head>
<body>
<!-- 总容器 -->
    <div class="wrapper">
        <!-- search部分 -->
        <div class="search">
            <div class="search-fixed-top" id="fixedBox">
                <div class="search-box">
                    <span class="fa fa-search"> 西服女正装大学生正装</span><i class="iconfont icon-zhaoxiangji"></i>
                </div>
            </div>
        </div>
        <!-- 推荐列表部分 -->
        <ul class="activitytype" id="activitytype">
            <li>
                <p style="color:indianred">推荐</p>
            </li>
            <li>
                <p>百货</p>
            </li>
            <li>
                <p>女装</p>
            </li>
            <li>
                <p onclick="location.href='food.html'">食品</p>
            </li>
            <li>
                <p>饰品</p>
            </li>
            <li>
                <p>手机</p>
            </li>
            <li>
                <p>美妆</p>
            </li>
        </ul>
        <!-- 横幅广告部分 -->
        <div class="activity">
            <ul class="activity-list">
                <li>
                    <img src="img/限时秒杀.png">
                    <div class="activity-info">
                        <p>限时秒杀</p>
                    </div>
                </li>
                <li>
                    <img src="img/充值中心.png">
                    <div class="activity-info">
                        <p>充值中心</p>
                    </div>
                </li>
                <li>
                    <img src="img/多多果园.png">
                    <div class="activity-info">
                        <p>多多果园</p>
                    </div>
                </li>
                <li>
                    <img src="img/9块9特卖.png">
                    <div class="activity-info">
                        <p>9块9特卖</p>
                    </div>
                </li>
                <li>
                    <img src="img/其他.png">
                    <div class="activity-info">
                        <p>其他</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="advertising">
            <div class="ddmc">
                <ul class="info">
                    <div class="left-info">
                        <img src="img/多多买菜.png">
                        <p>多多买菜</p>
                    </div>
                    <div class="right-info">
                        <p>次日自提</p>
                    </div>
                </ul>

                <ul class="ddmc-info">
                    <li>
                        <img src="img/11.99.png">
                        <p>&#165;11.99</p>
                    </li>
                    <li>
                        <img src="img/49.98.png">
                        <p>&#165;49.98</p>
                    </li>
                    <li>
                        <img src="img/5.98.png">
                        <p>&#165;5.98</p>
                    </li>
                </ul>
            </div>

            <div class="bybt">
                <ul class="info">
                    <div class="left-info">
                        <img src="img/百亿补贴.png">
                        <p>百亿补贴</p>
                    </div>
                    <div class="right-info">
                        <p>大牌正品</p>
                    </div>
                </ul>

                <ul class="bybt-info">
                    <li>
                        <img src="img/36.png">
                        <p>&#165;36</p>
                    </li>
                    <li>
                        <img src="img/98.2.png">
                        <p>&#165;98.2</p>
                    </li>
                    <li>
                        <img src="img/16.9.png">
                        <p>&#165;16.9</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="commodity" onclick="location.href='details.html'">
            <ul class="left">
                <img src="img/sp01.png">
                <div class="left-info1">
                    <h3>暑假大促</h3>
                    <p>新款牛油果背包小</p>
                </div>
                <div class="left-info2">
                    <p class="iconfont icon-jisufu_xianyonghoufulogo" style="color: #38CA73">先用后付</p>
                    <p style="color: indianred">&nbsp;关注立减4元</p>
                </div>
                <div class="left-info3">
                    <div class="p1" style="color: indianred">
                        <span class="larger">券后&#165;</span><span class="larger">13</span><span class="smaller">.86</span>
                    </div>
                    <p>店铺好评2315条</p>
                </div>
            </ul>
            <ul class="right">
                <img src="img/sp02.png">
                <div class="right-info1">
                    <p>抖音同款可爱恐龙玩偶情侣</p>
                </div>
                <div class="right-info2">
                    <p class="iconfont icon-jisufu_xianyonghoufulogo" style="color: #38CA73">先用后付</p>
                    <p style="color: #AAAAAA">&nbsp;退货包运费</p>
                </div>
                <div class="right-info3">
                    <div class="p1" style="color: indianred">
                        <span class="larger">历史低价&#165;</span><span class="larger">8</span><span class="smaller">.93</span>
                    </div>
                    <p>店铺好评1万条</p>
                </div>
            </ul>

        </div>
        <div class="commodity" onclick="location.href='details.html'">
            <ul class="left">
                <img src="img/sp03.png">
                <div class="left-info1">
                    <p>法式新款u领开衫短袖冰</p>
                </div>
                <div class="left-info2">
                    <p class="iconfont icon-jisufu_xianyonghoufulogo" style="color: #38CA73">先用后付</p>
                    <p style="color: indianred">&nbsp;好评超99%同款</p>
                </div>
                <div class="left-info3">
                    <div class="p1" style="color: indianred">
                        <span class="larger">券后&#165;</span><span class="larger">34</span><span class="smaller">.9</span>
                    </div>
                    <p>店铺好评2.1万+件</p>
                </div>
            </ul>
            <ul class="right">
                <img src="img/sp04.png">
                <div class="right-info1">
                    <p>卡通创意挂饰可爱背包恐龙</p>
                </div>
                <div class="right-info2">
                    <p class="iconfont icon-jisufu_xianyonghoufulogo" style="color: #38CA73">先用后付</p>
                    <p style="color: #AAAAAA">&nbsp;好评超88%同款</p>
                </div>
                <div class="right-info3">
                    <div class="p1" style="color: indianred">
                        <span class="larger">券后&#165;</span><span class="larger">3</span><span class="smaller">.92</span>
                    </div>
                    <p>店铺好评3.1万条</p>
                </div>
            </ul>

        </div>
        <div class="commodity" onclick="location.href='details.html'">
            <ul class="left">
                <img src="img/sp05.png">
                <div class="left-info1">
                    <h3 style="background: #38CA73;color: white">0元试用</h3>
                    <p>可爱独眼怪毛挂件</p>
                </div>
                <div class="left-info2">
                    <p class="iconfont icon-jisufu_xianyonghoufulogo" style="color: #38CA73">先用后付</p>
                    <p style="color: #38CA73">&nbsp;退货包运费</p>
                </div>
                <div class="left-info3">
                    <div class="p1" style="color: indianred">
                        <span class="larger">历史低价&#165;</span><span class="larger">2</span><span class="smaller">.6</span>
                    </div>
                    <p>已拼2.1万+件</p>
                </div>
            </ul>
            <ul class="right">
                <img src="img/sp06.png">
                <div class="right-info1">

                    <p>高级感镜面熊猫iPhone</p>
                </div>
                <div class="right-info2">
                    <p class="iconfont icon-jisufu_xianyonghoufulogo" style="color: #38CA73">先用后付</p>
                    <p style="color: #AAAAAA">&nbsp;极速退款</p>
                </div>
                <div class="right-info3">
                    <div class="p1" style="color: indianred">
                        <span class="larger">&nbsp;券后&#165;</span><span class="larger">5</span><span class="smaller">.88</span>
                    </div>
                    <p>店铺好评1万条</p>
                </div>
            </ul>

        </div>
        <div class="commodity" onclick="location.href='details.html'">
            <ul class="left">
                <img src="img/sp07.png">
                <div class="left-info1">
                    <h3>暑假大促</h3>
                    <p>德国进口耳塞睡眠</p>
                </div>
                <div class="left-info2">
                    <p class="iconfont icon-jisufu_xianyonghoufulogo" style="color: #38CA73">先用后付</p>
                    <p style="color: indianred">&nbsp;好评超80%同款</p>
                </div>
                <div class="left-info3">
                    <div class="p1" style="color: indianred">
                        <span class="larger">历史低价&#165;</span><span class="larger">2</span><span class="smaller">.13</span>
                    </div>
                    <p>店铺好评7905条</p>
                </div>
            </ul>
            <ul class="right">
                <img src="img/sp08.png">
                <div class="right-info1">

                    <p>韩国豹纹复古百搭眼镜</p>
                </div>
                <div class="right-info2">
                    <p class="iconfont icon-jisufu_xianyonghoufulogo" style="color: #38CA73">先用后付</p>
                    <p style="color: #AAAAAA">&nbsp;极速退款</p>
                </div>
                <div class="right-info3">
                    <div class="p1" style="color: indianred">
                        <span class="larger">&nbsp;&#165;</span><span class="larger">2</span><span class="smaller">.88</span>
                    </div>
                    <p>已拼1万+件</p>
                </div>
            </ul>
        </div>
        <!--底部菜单部分-->
            <ul class="footer">
                <li onclick="location.href='index.html'">
                    <i class="iconfont icon-shouyexuanzhong-copy" style="color: red"></i>
                    <p style="color: red">首页</p>
                </li>
                <li>
                    <i class="iconfont icon-shipin"></i>
                    <div class="icon-quantity">3</div> <!-- 添加数字 -->
                    <p>多多视频</p>
                </li>
                <li>
                    <img src="img/618.png">
                    <p>618大促</p>
                </li>
                <li onclick="location.href='chat.html'">
                    <i class="iconfont icon-liaotianjilu"></i>
                    <div class="icon-quantity">99+</div> <!-- 添加数字 -->
                    <p>聊天</p>
                </li>
                <li onclick="location.href='my.html'">
                    <i class="iconfont icon-gerenzhongxin-zhihui"></i>
                    <p>个人中心</p>
                </li>
            </ul>
    </div>

</html>